<template>
  <div
    v-video-player:myVideoPlayer="playerOptions"
    class="video-player-box"
    :playsinline="playsinline"
    @play="onPlayerPlay($event)"
    @pause="onPlayerPause($event)"
    @ended="onPlayerEnded($event)"
    @loadeddata="onPlayerLoadeddata($event)"
    @waiting="onPlayerWaiting($event)"
    @playing="onPlayerPlaying($event)"
    @timeupdate="onPlayerTimeupdate($event)"
    @canplay="onPlayerCanplay($event)"
    @canplaythrough="onPlayerCanplaythrough($event)"
    @ready="playerReadied"
    @statechanged="playerStateChanged($event)"
  />
</template>

<script>
export default {
  data () {
    return {
      // component options
      playsinline: true,
      // videojs options
      playerOptions: {
        autoplay: true, // 自动播放
        controls: true, // 是否显示控制栏
        language: 'zh-CN',
        techOrder: ['flash', 'html5'], // 兼容顺序
        flash: { hls: { withCredentials: false } },
        html5: { hls: { withCredentials: false } },
        playbackRates: [0.7, 1.0, 1.5, 2.0], // 倍速
        width: '804',
        height: '555',
        sources: [
          {
            type: 'video/flv',
            src: 'https://pull.ymq01.com/armenia/883268416.flv?wsSecret=63e6260b06572f7cb04a45881f5c84fe&wsABSTime=608af420'
          }
        ],
        poster: 'static/img/weixin.png', // 你的封面地址
        notSupportedMessage: '此视频暂无法播放，请稍后再试', // 允许覆盖Video.js无法播放媒体源时显示的默认信息。
        controlBar: {
          timeDivider: true,
          durationDisplay: true,
          remainingTimeDisplay: false,
          fullscreenToggle: true // 全屏按钮
        }
      }
    }
  },
  methods: {
    // listen event
    onPlayerPlay (player) {
      // console.log('player play!', player)
    },
    onPlayerPause (player) {
      // console.log('player pause!', player)
    },
    onPlayerEnded (player) {
      // console.log('player ended!', player)
    },
    onPlayerLoadeddata (player) {
      // console.log('player Loadeddata!', player)
    },
    onPlayerWaiting (player) {
      // console.log('player Waiting!', player)
    },
    onPlayerPlaying (player) {
      // console.log('player Playing!', player)
    },
    onPlayerTimeupdate (player) {
      // console.log('player Timeupdate!', player.currentTime())
    },
    onPlayerCanplay (player) {
      // console.log('player Canplay!', player)
    },
    onPlayerCanplaythrough (player) {
      // console.log('player Canplaythrough!', player)
    },
    // or listen state event
    playerStateChanged (playerCurrentState) {
      // console.log("player current update state", playerCurrentState);
    },
    // player is ready
    playerReadied (player) {
      // console.log("example 01: the player is readied", player);
    }
  }
}
</script>

<style lang="scss" scoped>
.video-player-box {
  width: 100%;
}
</style>
